<template>
    <div class="container">
        <div class="clock">
            <div class="time-box">
                <div class="numbers" ref="hoursFirst" :style="divStyle">
                    <li>0</li>
                    <li>1</li>
                    <li>2</li>
                </div>
            </div>
            <div class="time-box">
                <div class="numbers" ref="hoursSecond" :style="divStyle2">
                    <li>0</li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </div>
            </div>
            <div class="time-box">
                <div class="numbers" ref="minutesFirst" :style="divStyle3">
                    <li>0</li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </div>
            </div>
            <div class="time-box">
                <div class="numbers" ref="minutesSecond" :style="divStyle4">
                    <li>0</li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </div>
            </div>
            <div class="time-box">
                <div class="numbers" ref="secondsFirst" :style="divStyle5">
                    <li>0</li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </div>
            </div>
            <div class="time-box">
                <div class="numbers" ref="secondsSecond" :style="divStyle6">
                    <li>0</li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive, CSSProperties } from 'vue'

const hoursFirst = ref<HTMLDivElement | null>(null);
const hoursSecond = ref<HTMLDivElement | null>(null);
const minutesFirst = ref<HTMLDivElement | null>(null);
const minutesSecond = ref<HTMLDivElement | null>(null);
const secondsFirst = ref<HTMLDivElement | null>(null);
const secondsSecond = ref<HTMLDivElement | null>(null);

const divStyle = reactive<CSSProperties>({
    transform: ''
})
const divStyle2 = reactive<CSSProperties>({
    transform: ''
})
const divStyle3 = reactive<CSSProperties>({
    transform: ''
})
const divStyle4 = reactive<CSSProperties>({
    transform: ''
})
const divStyle5 = reactive<CSSProperties>({
    transform: ''
})
const divStyle6 = reactive<CSSProperties>({
    transform: ''
})

let hour1 = 0,
    hour2 = 0,
    minute1 = 0,
    minute2 = 0,
    second1 = 0;

const handleNumber = (num) => {
    if (num < 10) {
        return [0, num];
    } else {
        return [Math.floor(num / 10), num % 10];
    }
}

const changeTime = () => {
    let time = new Date();
    const [h_1, h_2] = handleNumber(time.getHours());
    const [m_1, m_2] = handleNumber(time.getMinutes());
    const [s_1, s_2] = handleNumber(time.getSeconds());
    if (h_1 !== hour1) {
        hour1 = h_1;
        divStyle.transform = `translateY(-${hour1 * 30}px)`;
    }
    if (h_2 !== hour2) {
        hour2 = h_2;
        divStyle2.transform = `translateY(-${hour2 * 30}px)`;
    }
    if (m_1 !== minute1) {
        minute1 = m_1;
        divStyle3.transform = `translateY(-${minute1 * 30}px)`;
    }
    if (m_2 !== minute2) {
        minute2 = m_2;
        divStyle4.transform = `translateY(-${minute2 * 30}px)`;
    }
    if (s_1 !== second1) {
        second1 = s_1;
        divStyle5.transform = `translateY(-${second1 * 30}px)`;
    }
    divStyle6.transform = `translateY(-${s_2 * 30}px)`;
}

onMounted(() => {
    setInterval(changeTime);
})
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    // position: fixed;
    // top: 50%;
    // left: 50%;
    z-index: 4;

    li {
        list-style: none;
        height: 30px;
        width: 30px;
        margin: 0;
        padding: 0;
        font-size: 22px;
        line-height: 30px;
        color: #bbbbbb;
    }

    .clock {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 500px;
        height: 30px;
        margin: 50% 0;
        background-color: #3b3b3b;
        box-shadow: 2px 2px 10px 3px #3b3b3b;
        transform: translateY(-50%);
        border-radius: 20px;
        font-size: 26px;
    }

    .time-box {
        width: 30px;
        height: 100%;
    }

    .numbers {
        background-color: #272727;
        box-shadow: 2px 2px 10px 3px #2f2f2f;
        text-align: center;
        border-radius: 10px;
        transition: all 0.5s;
    }
}
</style>